import React, { PureComponent } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Table, Card, Form, Pagination, Input, Button, Modal, message, Select, DatePicker } from 'antd'
import { applyForm, delApply, editApply, getProvince, getCity, getDistrict } from '@/services/setting'
import { getSubject } from '@/services/lessons'
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 },
}
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            data: [],
            count: 1,
            currentPage: '1',
            search_name: '',
            search_id_number: '',
            loading: true,
            start_date: '', end_date: '',
            currentPeople: {},
            id_number: '',
            name: '',
            culture: '',
            work_unit: '',
            province: '',
            city: '',
            district: '',
            work_unit_site: '',
            provinces: '',
            citys: '',
            districts: '',
            work_unit_sites: '',
            unit_contact: '',
            unit_phone: '',
            postcode: '',
            phone: '',
            level2: '',
            level3: '',
            certificate_number: '',
            certificate: '',
            opening_date: '',
            job_resume: '',
            test_item: '',
            test_nature: '',
            test_items: [],
            test_time: [],
            resume: '',
            level2_text: '',
            level3_text: '',
            editVisible: false,
            provinceData: [],
            cityData: [],
            districtData: [],
            citysData: [],
            districtsData: [],
            ccityData: [],
            cdistrictData: [],
            level2Data: [],
            level3Data: [],

        }
    }
    renderList = (page: string) => {
        const { search_id_number, search_name, start_date, end_date } = this.state;
        applyForm({ page, id_number: search_id_number, name: search_name, start_date, end_date }).then(res => {
            this.setState({
                data: res.data,
                count: res.count,
                loading: false
            })
        })
    }
    changeValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    changeSelect = (e: any, name: string) => {
        this.setState({
            [name]: e
        })
    }
    changeLevel2 = (e: any, d: any) => {
        const { level2Data } = this.state;
        for (let i = 0; i < level2Data.length; i++) {
            const item = level2Data[i];
            if (item.id === e * 1) {
                return this.setState({
                    level3Data: item.children,
                    level3: null,
                    level2: e,
                    level2_text: d.children
                })
            }
        }
    }
    changeLevel3 = (e: any, d: any) => {
        this.setState({
            level3: e + '',
            level3_text: d.children
        })
    }
    searchHandle = () => {
        this.renderList('1');
        this.setState({
            loading: true,
            currentPage: 1
        })
    }
    changePage = (e: any) => {
        this.renderList(e)
        this.setState({
            loading: true,
            currentPage: e
        })
    }
    deleteHandle = (id: string) => () => {
        Modal.confirm({
            title: '提示',
            content: '确定删除？',
            onOk: () => {
                delApply({ id }).then(res => {
                    if (res.static === 1) {
                        message.success('已删除');
                        this.renderList(this.state.currentPage)

                    } else {
                        message.error('删除失败')
                    }
                })
            }
        })
    }
    showEdit = (row: any) => () => {
        const { level2Data } = this.state;
        const { id_number,
            name,
            culture,
            work_unit,
            province,
            city,
            district,
            work_unit_site,
            provinces,
            citys,
            districts,
            work_unit_sites,
            cprovince,
            ccity,
            cdistrict,
            cwork_unit_site,
            unit_contact,
            unit_phone,
            postcode,
            phone,
            level2,
            level3,
            level2_text,
            level3_text,
            certificate_number,
            certificate,
            opening_date,
            job_resume,
            test_items,
            test_time,
            test_item,
            test_nature,
            resume, type
        } = row;
        if (province) {
            getCity({ id: province }).then(res => {
                this.setState({
                    cityData: res
                })
            })
        }
        if (city) {
            getDistrict({ id: city }).then(res => {
                this.setState({
                    districtData: res
                })
            })
        }
        if (provinces) {
            getCity({ id: provinces }).then(res => {
                this.setState({
                    citysData: res
                })
            })
        }
        if (citys) {
            getDistrict({ id: citys }).then(res => {
                this.setState({
                    districtsData: res
                })
            })
        }
        if (type === 4) {
            if (cprovince) {
                getCity({ id: cprovince }).then(res => {
                    this.setState({
                        ccityData: res
                    })
                })
            }
            if (ccity) {
                getDistrict({ id: ccity }).then(res => {
                    this.setState({
                        cdistrictData: res
                    })
                })
            }
        }
        for (let i = 0; i < level2Data.length; i++) {
            const item = level2Data[i];
            if (item.id === (level2 * 1)) {
                this.setState({
                    level3Data: item.children
                })
            }
        }
        this.setState({
            currentPeople: row,
            id_number,
            name,
            culture,
            work_unit,
            province,
            city,
            district,
            work_unit_site,
            provinces,
            citys,
            districts,
            work_unit_sites,
            cprovince,
            ccity,
            cdistrict,
            cwork_unit_site,
            unit_contact,
            unit_phone,
            postcode,
            phone,
            level2,
            level3,
            level2_text,
            level3_text,
            opening_date,
            job_resume,
            test_items: test_items ? test_items.split(',') : [],
            test_time: test_time ? test_time.split(',') : [],
            test_item,
            test_nature,
            certificate_number,
            certificate,
            resume,
            editVisible: true,
            type
        })
    }
    confirmEdit = () => {
        const { id_number,
            name,
            culture,
            work_unit,
            province,
            city,
            district,
            work_unit_site,
            provinces,
            citys,
            districts,
            work_unit_sites,
            cprovince,
            ccity,
            cdistrict,
            cwork_unit_site,
            unit_contact,
            unit_phone,
            postcode,
            phone,
            level2,
            level3,
            level2_text,
            level3_text,
            opening_date,
            job_resume,
            test_item,
            test_nature,
            certificate_number,
            certificate,
            resume,
            currentPeople,
            test_time,
            test_items
        } = this.state;
        editApply({
            id_number,
            name,
            culture,
            work_unit,
            province,
            city,
            district,
            work_unit_site,
            provinces,
            citys,
            districts,
            work_unit_sites,
            cprovince,
            ccity,
            cdistrict,
            cwork_unit_site,
            unit_contact,
            unit_phone,
            postcode,
            phone,
            level2,
            level3,
            level2_text,
            level3_text,
            opening_date,
            job_resume, test_item, certificate_number, certificate, id: currentPeople.id,
            test_nature,
            resume,
            test_items,
            test_time
        }).then(res => {
            if (res.static === 1) {
                message.success('已修改')
                this.setState({
                    editVisible: false
                })
                this.renderList(this.state.currentPage)
            }
        })
    }
    changeProvince = (e: any, name: string, dataName: string) => {
        if (name === 'province') {
            this.setState({
                city: null,
                district: null,
            })
        }
        if (name === 'provinces') {
            this.setState({
                citys: null,
                districts: null,
            })
        }
        if (name === 'cprovince') {
            this.setState({
                ccity: null,
                cdistrict: null,
            })
        }
        getCity({ id: e }).then(res => {
            this.setState({
                [dataName]: res,
                [name]: e
            })
        })
    }
    changeCity = (e: any, name: string, dataName: string) => {
        if (name === 'city') {
            this.setState({
                district: null,
            })
        }
        if (name === 'citys') {
            this.setState({
                districts: null,
            })
        }
        if (name === 'ccity') {
            this.setState({
                cdistrict: null,
            })
        }
        getDistrict({ id: e }).then(res => {
            this.setState({
                [dataName]: res,
                [name]: e
            })
        })
    }
    changeDistrict = (e: any, name: string) => {
        this.setState({
            [name]: e
        })

    }
    changeOpeningDate = (e: object, opening_date: string) => {
        this.setState({
            opening_date
        })
    }
    changeTestItems = (e: any, index: number) => {
        const { test_items } = this.state;
        test_items[index] = e.target.value;
        this.setState({
            test_items: [...test_items]
        })
    }
    changeTestTime = (e: any, index: number) => {
        const { test_time } = this.state;
        test_time[index] = e.target.value;
        this.setState({
            test_time: [...test_time]
        })
    }
    addTestItems = () => {
        const { test_items, test_time } = this.state;
        if (test_items.length >= 6) return message.error('最多添加六项');
        test_items.push('');
        test_time.push('');
        this.setState({
            test_items: [...test_items],
            test_time: [...test_time]
        })
    }
    deleteTestItems = (index) => () => {
        const { test_items, test_time } = this.state;
        if (test_items.length <= 1) return message.error('最少添加一项');
        test_items.splice(index, 1);
        test_time.splice(index, 1);
        this.setState({
            test_items: [...test_items],
            test_time: [...test_time]
        })
    }
    componentDidMount() {
        this.renderList('1')
        getSubject().then(res => {
            this.setState({
                level2Data: res,
            })
        })
        getProvince().then(res => {
            this.setState({
                provinceData: res,
            })
        })
    }

    render() {
        const { data, count, loading, currentPage, id_number,
            name,
            culture,
            work_unit,
            province,
            city,
            district,
            work_unit_site,
            provinces,
            citys,
            districts,
            work_unit_sites,
            postcode,
            phone,
            level2,
            level3,
            level2_text,
            level3_text,
            test_time,
            test_items,
            job_resume, test_item, resume, unit_contact, unit_phone, certificate_number, certificate, test_nature,
            opening_date, editVisible, level2Data, level3Data, provinceData, cprovince, ccity, cdistrict,
            cityData, districtData, citysData, districtsData, ccityData, cdistrictData, type } = this.state;
        function getSex(psidno) {
            var sexno, sex
            if (psidno.length == 18) {
                sexno = psidno.substring(16, 17)
            } else if (psidno.length == 15) {
                sexno = psidno.substring(14, 15)
            } else {
                return false
            }
            var tempid = sexno % 2;
            if (tempid == 0) {
                sex = '女'
            } else {
                sex = '男'
            }
            return sex
        }
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name'
            },
            {
                title: '身份证号',
                dataIndex: 'id_number'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render: (sex: string, row: any) => {
                    return getSex(row.id_number)
                }
            },
            {
                title: '报名科目',
                dataIndex: 'level2_text'
            },
            {
                title: '科目代号',
                dataIndex: 'level3_text'
            },
            {
                title: '手机号码',
                dataIndex: 'phone'
            },
            {
                title: '工作单位',
                dataIndex: 'work_unit'
            },
            {
                title: '报名时间',
                dataIndex: 'registration_time'
            },
            {
                title: '操作',
                dataIndex: 'id',
                render: (id: any, row: object) => {
                    return <React.Fragment><a style={{ marginRight: 10 }} onClick={this.showEdit(row)}>修改</a><a onClick={this.deleteHandle(id)}>删除</a></React.Fragment>
                }
            }

        ]
        return (
            <PageContainer title="申请表管理">
                <Card bordered={false}>
                    <div style={{ overflow: 'hidden', marginBottom: 20 }}>
                        <Form style={{ float: 'right' }} layout="inline">
                            <Form.Item><Input placeholder="请输入姓名" onChange={(e: any) => this.changeValue(e, 'search_name')} /></Form.Item>
                            <Form.Item><Input placeholder="请输入身份证号" onChange={(e: any) => this.changeValue(e, 'search_id_number')} /></Form.Item>
                            <Form.Item><Button type="primary" onClick={this.searchHandle}>搜索</Button></Form.Item>
                        </Form>
                    </div>
                    <Table loading={loading} columns={columns} pagination={false} rowKey="id" dataSource={data}></Table>
                    <Pagination style={{ float: 'right', marginTop: 20 }} current={currentPage * 1} onChange={this.changePage} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </Card>
                <Modal onOk={this.confirmEdit} title="修改申请" visible={editVisible} onCancel={() => this.setState({ editVisible: false })}>
                    <Form {...layout}>
                        <Form.Item label="姓名">
                            <Input placeholder="姓名" value={name} onChange={(e: any) => this.changeValue(e, 'name')}></Input>
                        </Form.Item>
                        <Form.Item label="身份证号">
                            <Input placeholder="身份证号" value={id_number} onChange={(e: any) => this.changeValue(e, 'id_number')}></Input>
                        </Form.Item>
                        <Form.Item label="文化程度">
                            <Select placeholder="文化程度" value={culture} onChange={(e: any) => this.changeSelect(e, 'culture')}>
                                <Select.Option value="">请选择文化程度</Select.Option>
                                <Select.Option value="初中">初中</Select.Option>
                                <Select.Option value="高中">高中</Select.Option>
                                <Select.Option value="中专">中专</Select.Option>
                                <Select.Option value="专科">专科</Select.Option>
                                <Select.Option value="本科">本科</Select.Option>
                                <Select.Option value="硕士">硕士</Select.Option>
                                <Select.Option value="博士">博士</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="手机号码">
                            <Input placeholder="手机号码" value={phone} onChange={(e: any) => this.changeValue(e, 'phone')} ></Input>
                        </Form.Item>
                        <Form.Item label="工作单位">
                            <Input placeholder="工作单位" value={work_unit} onChange={(e: any) => this.changeValue(e, 'work_unit')}></Input>
                        </Form.Item>
                        <Form.Item label="工作单位地址">
                            <Select style={{ width: '33.3%' }} value={province && province + ''} onChange={(e: any) => this.changeProvince(e, 'province', 'cityData')} placeholder="省">
                                {
                                    provinceData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Select style={{ width: '33.3%' }} value={city && city + ''} onChange={(e: any) => this.changeCity(e, 'city', 'districtData')} placeholder="市">
                                {
                                    cityData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Select style={{ width: '33.3%' }} value={district && district + ''} onChange={(e: any) => this.changeDistrict(e, 'district')} placeholder="区">

                                {
                                    districtData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Input placeholder="详细地址" value={work_unit_site} onChange={(e: any) => this.changeValue(e, 'work_unit_site')}></Input>
                        </Form.Item>
                        <Form.Item label="通讯地址">
                            <Select style={{ width: '33.3%' }} value={provinces && provinces + ''} onChange={(e: any) => this.changeProvince(e, 'provinces', 'citysData')} placeholder="省">
                                {
                                    provinceData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Select style={{ width: '33.3%' }} value={citys && citys + ''} onChange={(e: any) => this.changeCity(e, 'citys', 'districtsData')} placeholder="市">
                                {
                                    citysData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Select style={{ width: '33.3%' }} value={districts && districts + ''} onChange={(e: any) => this.changeDistrict(e, 'districts')} placeholder="区">

                                {
                                    districtsData.map(item => {
                                        return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                            <Input placeholder="详细地址" value={work_unit_sites} onChange={(e: any) => this.changeValue(e, 'work_unit_sites')}></Input>
                        </Form.Item>
                        <Form.Item label="邮编">
                            <Input placeholder="邮编" value={postcode} onChange={(e: any) => this.changeValue(e, 'postcode')}></Input>
                        </Form.Item>
                        {
                            type !== 4 && <Form.Item label="申请作业项目">
                                <Select placeholder="申请作业项目" value={level2 + ''} onChange={this.changeLevel2}>
                                    {
                                        level2Data && level2Data.map((item: any) => {
                                            return <Select.Option value={item.id + ''} key={item.id + ''}>{item.title}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        }
                        {
                            type !== 4 && <Form.Item label="申请项目代号">
                                <Select placeholder="申请项目代号" value={level3 && level3 + ''} onChange={this.changeLevel3}>
                                    {
                                        level3Data && level3Data.map((item: any) => {
                                            return <Select.Option value={item.id + ''} key={item.id}>{item.title}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        }
                        {
                            type !== 2 && <Form.Item label="工作简历">
                                <Input.TextArea style={{height:100}} placeholder="工作简历" value={job_resume} onChange={(e: any) => this.changeValue(e, 'job_resume')}></Input.TextArea>
                            </Form.Item>
                        }
                        {
                            (type === 2 || type === 4) && <Form.Item label="证书编号">
                                <Input placeholder="证书编号" value={certificate_number} onChange={(e: any) => this.changeValue(e, 'certificate_number')}></Input>
                            </Form.Item>
                        }
                        {
                            type === 4 && <Form.Item label="发证机关">
                                <Input placeholder="发证机关" value={certificate} onChange={(e: any) => this.changeValue(e, 'certificate')}></Input>
                            </Form.Item>
                        }
                        {
                            type === 4 && <Form.Item label="发证机关地址">
                                <Select style={{ width: '33.3%' }} value={cprovince && cprovince + ''} onChange={(e: any) => this.changeProvince(e, 'cprovince', 'ccityData')} placeholder="省">
                                    {
                                        provinceData.map(item => {
                                            return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                                <Select style={{ width: '33.3%' }} value={ccity && ccity + ''} onChange={(e: any) => this.changeCity(e, 'ccity', 'cdistrictData')} placeholder="市">
                                    {
                                        ccityData.map(item => {
                                            return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                                <Select style={{ width: '33.3%' }} value={cdistrict && cdistrict + ''} onChange={(e: any) => this.changeDistrict(e, 'cdistrict')} placeholder="区">

                                    {
                                        cdistrictData.map(item => {
                                            return <Select.Option key={item.id + ''} value={item.id + ''}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                                <Input placeholder="详细地址" value={work_unit_site} onChange={(e: any) => this.changeValue(e, 'work_unit_site')}></Input>
                            </Form.Item>
                        }

                        {
                            (type === 2 || type === 4) && <Form.Item label="首次发证日期">
                                <DatePicker placeholder={opening_date} onChange={this.changeOpeningDate} showTime style={{ width: '100%' }} />
                            </Form.Item>
                        }
                        {
                            type === 2 && <Form.Item label="持证期间作业经历简历">
                                <Input.TextArea placeholder="持证期间作业经历简历" style={{height:200}} value={resume} onChange={(e: any) => this.changeValue(e, 'resume')}></Input.TextArea>
                            </Form.Item>
                        }
                        {
                            type !== 1 && <Form.Item label="单位联系人">
                                <Input placeholder="单位联系人" value={unit_contact} onChange={(e: any) => this.changeValue(e, 'unit_contact')}></Input>
                            </Form.Item>
                        }
                        {
                            type !== 1 && <Form.Item label="单位联系电话">
                                <Input placeholder="单位联系电话" value={unit_phone} onChange={(e: any) => this.changeValue(e, 'unit_phone')}></Input>
                            </Form.Item>
                        }
                        {
                            type === 3 && <Form.Item label="申请考试性质">
                                <Select value={test_nature + ''} onChange={(e: any) => this.changeSelect(e, 'test_nature')}>
                                    <Select.Option value="">请选择考试性质</Select.Option>
                                    <Select.Option value="1">首次考试</Select.Option>
                                    <Select.Option value="2">重新考试</Select.Option>
                                    <Select.Option value="3">补考</Select.Option>
                                    <Select.Option value="4">增项</Select.Option>
                                    <Select.Option value="5">抽考</Select.Option>
                                </Select>
                            </Form.Item>
                        }
                        {
                            type === 4 && test_items.map((item: any, index: number) => {
                                return <React.Fragment key={index}>
                                    <Form.Item label={'复审考试项目' + (index + 1)}>
                                        <Input placeholder={'复审考试项目' + (index + 1)} value={item} onChange={(e: any) => this.changeTestItems(e, index)}></Input>
                                    </Form.Item>
                                    <Form.Item label={'上次考试时间' + (index + 1)}>
                                        <Input placeholder={'上次考试时间' + (index + 1)} value={test_time[index]} onChange={(e: any) => this.changeTestTime(e, index)}></Input>
                                    </Form.Item>
                                    <Button type="primary" danger size="small" style={{ position: 'relative', top: -15, left: 50 }} onClick={this.deleteTestItems(index)}>删除复审考试项目</Button>
                                </React.Fragment>
                            })
                        }
                        {
                            type === 4 && <Button type="primary" style={{ width: '100%' }} onClick={this.addTestItems}>添加复审考试项目</Button>
                        }
                    </Form>
                </Modal>
            </PageContainer>
        );
    }
}

export default Index;
